import React, { Component } from 'react'
import { getCate, getGoods, cartAdd } from '../../request/api'
import { NavBar, Icon } from 'antd-mobile';
import '../../assets/css/topBar.css';
export default class Cate extends Component {

    constructor() {
        super()
        this.state = {
            cate: [],
            goods: [],
            selectId: 1,
            title: "全部分类商品"
        }
    }
    componentDidMount() {

        getCate().then(res => {
            if (res.code === 200) {
                this.setState({ cate: res.list })
            }
        })
        getGoods().then(res => {
            if (res.code === 200) {
                this.setState({ goods: res.list })
            }
        })

    }

    changeId(fid, title) {
        this.setState({ selectId: fid })
        getGoods({ fid }).then(res => {
            if (res.code === 200) {
                this.setState({ goods: res.list, title })
            }
        })
    }

    toDetail(id) {
        this.props.history.push("/detail/" + id);
    }

    addCart(id) {
        let uid = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")).uid : []
        let data = {
            uid,
            type: 1,
            goodsid: id,
            num: 1
        }
        console.log(data);
        cartAdd(data).then(res => {
            if (res.code === 200) {
                console.log(res);
                alert("购物车添加成功")
            } else {
                alert(res.msg)
            }
        })
    }
    render() {
        const { cate, goods, selectId, title } = this.state;
       
        return (
            <>
                <NavBar
                    mode="dark"
                >商品分类</NavBar>

                {/* <!-- 搜索栏 --> */}
                <div className="top-search classify">
                    <div className="w">
                        <div className="top">
                            <form className="search">
                                <i className="iconfont icon-magnifier"></i>
                                <input type="search" placeholder="按内容搜索" />
                            </form>
                        </div>
                    </div>
                </div>

                {/* <!-- 主要展示区 --> */}
                <div className="main">
                    <div className="inner">
                        <aside>
                            <ul>
                                {

                                    cate.map(item => (
                                        <li key={item.id} onClick={() => this.changeId(item.id, item.catename)}><a>{item.catename}</a></li>
                                    ))
                                }
                            </ul>
                        </aside>

                        <article>
                            {/* <section>
                                <span>面部护肤</span>
                                <div className="figure">
                                    {
                                        goods.map(item => (
                                            <div key={item.id}>
                                                <img src={this.$pregImg+item.img} alt="" />
                                                <a >{item.goodsname}</a>
                                            </div>
                                        ))
                                    }


                                </div>

                            </section> */}

                            <div className="fenlei">
                                <h2>{title}</h2>
                                <ul>

                                    {
                                        goods.map(item => (


                                            <li key={item.id} >
                                                <div className="l">
                                                    <img src={this.$pregImg + item.img} alt="" onClick={() => this.toDetail(item.id)} />
                                                </div>
                                                <div className="r">
                                                    <p className="wz"><span className="xs">限时</span>{item.goodsname}</p>
                                                    <p className="wz2">{item.description}</p>

                                                    <div className="box">
                                                        <div className="lInner">
                                                            <div className="row1">
                                                                <span className="sp1">&yen;{item.price}</span>
                                                                <span className="sp2">&yen;{item.market_price}</span>
                                                            </div>

                                                        </div>
                                                        <div className="rInner">
                                                            <div className="redButton" onClick={() => this.addCart(item.id)}>加入购物车</div>
                                                        </div>
                                                    </div>
                                                    <div className="row2">
                                                        <p>
                                                            999人已付款&nbsp;99.9%好评
                                                        </p>
                                                    </div>
                                                </div>
                                            </li>


                                        ))
                                    }

                                </ul>
                            </div>

                        </article>
                    </div>
                </div>
            </>
        )
    }
}
